@slider-width: 16px;

.slider {
  position: relative;

  > .dragger {
    background: @purple;

    border-radius: @slider-width;
    width: @slider-width;
    height: @slider-width;
    box-shadow: 0 0 0 3px #fff;
  }

  > .dragger:hover {
    background: @purple-dark;
  }

  > .track {
    width: auto !important; // overwrite inline styles
    background: @white-darkest;
    border-radius: 8px;
    height: 3px;
    left: -(@slider-width / 2);
    right: -(@slider-width / 2);
  }

  > .value {
    top: -29px;
    position: absolute;
    right: -(@slider-width / 2);
    // width: 80px;
    color: @60;
    text-align: right;
  }

  &.disabled {
    cursor: not-allowed;

    &:after {
      content: '';
      display: block;
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      top: -2px;
      left: -8px;
      bottom: -2px;
      right: -8px;
    }

    > .dragger {
      background: @gray-lightest;
    }

    > .track {
      background: lighten(@white-darkest, 3);
    }
  }
}
